<!--
 * @Author: Shususumu
 * @Date: 2020-10-17 15:49:06
 * @LastEditTime: 2020-10-20 17:17:34
 * @FilePath: \campusPTjobs\src\views\customer\customer_details.vue
-->
<template>
  <div id="customer_details">
    <el-button @click="back" type="text" size="medium">返回</el-button>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="基本信息">
        <div id="waiter_msg">
          <div class="demo-type">
            <el-avatar :size="100" src="https://empty" @error="errorHandler">
              <img :src="msg.imgPhoto" />
            </el-avatar>
          </div>
          <h2>{{ msg.realname }}</h2>
          <p>联系方式:{{ msg.telephone }}</p>
          <p>状态:{{ msg.status }}</p>
          <p>地址:{{ msg.province }}{{ msg.city }}</p>
        </div>
      </el-tab-pane>
      <el-tab-pane label="订单信息" name="订单信息">
        <el-table :data="queryBasic" stripe style="width: 100%">
          <el-table-column fixed prop="orderId" label="订单编号" width="80">
          </el-table-column>
          <el-table-column fixed prop="orderTime" label="下单时间" width="150">
          </el-table-column>
          <el-table-column prop="total" label="总价" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地点"> </el-table-column>
          <el-table-column prop="waiterName" label="员工"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button @click="details(scope.row)" type="text" size="small"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table></el-tab-pane
      >
      <el-tab-pane label="服务地址" name="服务地址"
        ><el-table :data="customeraddress" stripe style="width: 100%">
          <el-table-column prop="id" label="编号" width="80"> </el-table-column>
          <el-table-column prop="province" label="省/自治区"> </el-table-column
          ><el-table-column prop="city" label="市"> </el-table-column>
          <el-table-column prop="area" label="区/县"> </el-table-column>
          <el-table-column prop="address" label="街道"> </el-table-column>
          <el-table-column prop="telephone" label="手机号" width="120">
          </el-table-column> </el-table
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import qs from "querystring";
export default {
  data() {
    return {
      activeName: "基本信息",
      msg: [],
      customeraddress: [],
      queryBasic: [],
      imgPhoto: "",
    };
  },
  created() {
    this.msg = this.$route.query.msg;
  },
  methods: {
    //详情功能
    details(msg) {
      this.$router.push({ path: "/order_details/index", query: { msg: msg } });
    },
    //返回
    back() {
      this.$router.back();
    },
    handleClick(tab, event) {
      var id = this.$route.query.msg.id;
      //   console.log(tab, event);
      if (this.activeName == "服务地址") {
        this.$axios
          .get("/address/findByCustomerId", { params: { id } })
          .then((res) => {
            // console.log(id);
            // console.log(res);
            this.customeraddress = res.data.data;
          });
      } else if (this.activeName == "订单信息") {
        var customerId = this.$route.query.msg.id;
        this.$axios
          .get("/order/queryBasic", { params: { customerId } })
          .then((res) => {
            // console.log(customerId);
            // console.log(res.data.data);
            this.queryBasic = res.data.data;
          });
      }
    },
    errorHandler() {
      return true;
    },
  },
};
</script>
<style lang="scss" scoped>
#customer_details {
  margin: 18px;
}
#waiter_msg {
  width: 200px;
  margin: 0 auto;
}
</style>